  <template>
    <div>
        <!-- 车位搜索查询 -->
        <el-select v-model="searchAndSize.value" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
        </el-select>
        <el-input
            clearable
            v-model.lazy="searchAndSize.input"
            placeholder="请输入内容"
        ></el-input>

        <el-button
            type="primary"
            icon="el-icon-search"
            @click="getParkinData(searchAndSize)"
            style="margin-left: 10px"
            id="searchBut"
        >
            搜索
        </el-button>
        <select
            name=""
            id="AuditStatus"
            v-model="searchAndSize.state"
            @change="getParkinData(searchAndSize)"
        >
            <option value="全部审核">全部审核</option>
            <option value="未审核">未审核</option>
            <option value="已审核">已审核</option>
            <option value="审核通过">审核通过</option>
            <option value="审核不通过">审核不通过</option>
        </select>
        <!-- 车位数据列表 -->
        <el-table :data="ParkinData.data" style="width: 100%">
            <el-table-column prop="time" label="上传时间"> </el-table-column>
            <el-table-column prop="address" label="车位地址"> </el-table-column>
            <el-table-column prop="number" label="车位号"> </el-table-column>
            <el-table-column prop="property" label="车位产权">
            </el-table-column>
            <el-table-column prop="cycle" label="出租周期"> </el-table-column>
            <el-table-column prop="price" label="车位价格"> </el-table-column>
            <el-table-column prop="state" label="操作">
                <template slot-scope="scope">
                    <div v-if="scope.row.state == '1'">
                        <el-button
                            type="primary"
                            plain
                            @click="updateParkingState(scope.row._id, '2',scope.row.number)"
                        >
                            审核通过
                        </el-button>
                        <el-button
                            type="danger"
                            plain
                            id="redBut"
                            @click="updateParkingState(scope.row._id, '3',scope.row.number)"
                            style="margin: 5px 0 0 0"
                        >
                            审核不通过
                        </el-button>
                    </div>
                    <el-button
                        :plain="true"
                        @click="open2"
                        v-else-if="scope.row.state == '2'"
                        style="txet-aling: center"
                        class="true"
                    >
                        车位信息通过
                    </el-button>
                    <el-button
                        :plain="true"
                        @click="open2"
                        v-else-if="scope.row.state == '3'"
                        class="fales"
                    >
                        车位信息不通过
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 车位分页 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchAndSize.current"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="searchAndSize.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="ParkinData.totle"
        >
        </el-pagination>
    </div>
</template>
<script>
import axios from "../../http/axios";
import { createNamespacedHelpers } from "vuex";
const { mapMutations, mapActions, mapState } = createNamespacedHelpers(
    "parkings"
);
export default {
    props:['token'],
    data() {
        return {
            // 下拉列表选项
            options: [
                {
                    value: "time",
                    label: "时间",
                },
                {
                    value: "address",
                    label: "地址",
                },
                {
                    value: "number",
                    label: "车位号",
                },
                {
                    value: "cycle",
                    label: "周期",
                },
                {
                    value: "price",
                    label: "价格",
                },
            ],
            // 分页配置
            searchAndSize: {
                // 当前第几页
                current: 1,
                // 每页显示条数
                pageSize: 5,
                // 需要搜索的东西
                value: "time",
                // 搜索的内容
                input: "",
                // 订单审核状态
                state: "全部审核",
            },
        };
    },
    mounted() {
        // 进入页面就把数据渲染到页面上
        this.getParkinData(this.searchAndSize);
    },
    watch: {},
    computed: {
        // 车位渲染数据
        ...mapState(["ParkinData"]),
    },
    methods: {
        // 获取车位渲染数据
        ...mapActions(["getParkinData"]),
        // 修改车位状态
        async updateParkingState(_id, state,number) {
            if(state==2){
                 axios({
                    url:'/logs/createLogs',
                    method:'post',
                    data:{
                        name:this.token,
                        operation:'车位号'+number+'审核通过',
                        result:'成功'
                    }
                    })
            }else{
                 axios({
                    url:'/logs/createLogs',
                    method:'post',
                    data:{
                        name:this.token,
                        operation:'车位号'+number+'审核不通过',
                        result:'成功'
                    }
                    })
            }
            
            const { data } = await axios({
                url: "/parkings/updateParkingState",
                method: "post",
                data: {
                    _id,
                    state,
                },
            });
            console.log(data);
            this.getParkinData(this.searchAndSize);
        },

        // 分页配置
        //改变当前显示条数
        handleSizeChange(val) {
            this.searchAndSize.pageSize = val;
            this.getParkinData(this.searchAndSize);
        },
        // 改变当前第几页
        handleCurrentChange(val) {
            this.searchAndSize.current = val;
            this.getParkinData(this.searchAndSize);
        },
        // 已审核的状态
        open2() {
            this.$message({
                message: "这个订单已经审核",
                type: "success",
            });
        },
    },
};
</script>
<style>
.el-input {
    margin-left: 20px;
    width: 300px;
    display: inline-block;
}
.el-button span {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.el-button {
    margin: 0;
    width: 120px;
}
#redBut {
    margin: 0;
}
.true {
    color: green;
    border: 1px solid skyblue;
}
.fales {
    color: red;
    border: 1px solid skyblue;
}
#searchBut {
    padding: 12px 20px 11px 20px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

#AuditStatus {
    float: right;
    margin-right: 30px;
    padding: 12px 20px 11px 20px;
    box-sizing: border-box;
    border: 1px solid black;
    border-radius: 5px;
}
</style>